<script setup lang="ts">
import xiazai5 from '@/assets/下载 (5).png'
import xiazai6 from '@/assets/下载 (6).png'
import u4229 from '@/assets/u4229.png'
</script>


<template>
    <div class="container">
        <header class="navtop">
            <van-nav-bar title="任务中心" left-arrow @click-left="$router.back()" z-index="99" fixed :border="false"
                safe-area-inset-top />
        </header>

        <main>
            <div style="display: flex;justify-content: space-between;align-items:flex-start;">
                <div>
                    <h1 style="font-size: 50px;margin: 0;color: #d85a37;padding-top: 40px;">200</h1>
                    <p style="margin: 0;color: #7f6d5d;">可用次数</p>
                </div>
                <div style="height: 230px;">
                    <van-image style="height: 100%;" class="bgposition2" :src="u4229"></van-image>
                </div>
            </div>
            <div class="cardbox">
                <h2 style="margin-bottom: 20px;">做任务 领次数</h2>
                <div class="card">
                    <div class="card-left">
                        <div class="icon">
                            <van-image style="height: 100%;" class="bgposition2" :src="xiazai5"></van-image>
                        </div>
                        <div style="flex:1; padding: 0 20px;">
                            <h3>每日分享3个好友</h3>
                            <p style="color: #ccc;margin: 5px 0;">每分享1个，可得<span style="color: #d85a37;">次数+1</span></p>
                            <van-progress :percentage="33" stroke-width="8" pivot-text="1/3" pivot-color="#f9deb2"
                                color="linear-gradient(to right, #f7f7f7, #f9deb2)" />

                        </div>
                    </div>
                    <div>
                        <van-button size="small" color="#fae5bc" style="color: #333;">去分享</van-button>
                    </div>

                </div>

                <div class="card">
                    <div class="card-left">
                        <div class="icon">
                            <van-image style="height: 100%;" class="bgposition2" :src="xiazai6"></van-image>
                        </div>
                        <div style="flex:1; padding: 0 20px;">
                            <h3>每日邀请3个新用户</h3>
                            <p style="color: #ccc;margin: 5px 0;">每邀请1个，可得<span style="color: #d85a37;">次数+5</span></p>
                            <van-progress :percentage="0" stroke-width="8" pivot-text="0/3" pivot-color="#f9deb2"
                                color="linear-gradient(to right, #f7f7f7, #f9deb2)" />

                        </div>
                    </div>
                    <div>
                        <van-button size="small" color="#fae5bc" style="color: #333;">去邀请</van-button>
                    </div>

                </div>

                <!--  -->


                <div class="card">
                    <div class="card-left">
                        <div class="icon">
                            <van-image style="height: 100%;" class="bgposition2" :src="xiazai5"></van-image>
                        </div>
                        <div style="flex:1; padding: 0 20px;">
                            <h3>每日分享3个好友</h3>
                            <p style="color: #ccc;margin: 5px 0;">每分享1个，可得<span style="color: #d85a37;">次数+1</span></p>
                            <van-progress :percentage="33" stroke-width="8" pivot-text="1/3" pivot-color="#f9deb2"
                                color="linear-gradient(to right, #f7f7f7, #f9deb2)" />

                        </div>
                    </div>
                    <div>
                        <van-button size="small" color="#fae5bc" style="color: #333;">去分享</van-button>
                    </div>

                </div>

                <div class="card">
                    <div class="card-left">
                        <div class="icon">
                            <van-image style="height: 100%;" class="bgposition2" :src="xiazai6"></van-image>
                        </div>
                        <div style="flex:1; padding: 0 20px;">
                            <h3>每日邀请3个新用户</h3>
                            <p style="color: #ccc;margin: 5px 0;">每邀请1个，可得<span style="color: #d85a37;">次数+5</span></p>
                            <van-progress :percentage="0" stroke-width="8" pivot-text="0/3" pivot-color="#f9deb2"
                                color="linear-gradient(to right, #f7f7f7, #f9deb2)" />

                        </div>
                    </div>
                    <div>
                        <van-button size="small" color="#fae5bc" style="color: #333;">去邀请</van-button>
                    </div>

                </div>
                <div class="card">
                    <div class="card-left">
                        <div class="icon">
                            <van-image style="height: 100%;" class="bgposition2" :src="xiazai5"></van-image>
                        </div>
                        <div style="flex:1; padding: 0 20px;">
                            <h3>每日分享3个好友</h3>
                            <p style="color: #ccc;margin: 5px 0;">每分享1个，可得<span style="color: #d85a37;">次数+1</span></p>
                            <van-progress :percentage="33" stroke-width="8" pivot-text="1/3" pivot-color="#f9deb2"
                                color="linear-gradient(to right, #f7f7f7, #f9deb2)" />

                        </div>
                    </div>
                    <div>
                        <van-button size="small" color="#fae5bc" style="color: #333;">去分享</van-button>
                    </div>

                </div>

                <div class="card">
                    <div class="card-left">
                        <div class="icon">
                            <van-image style="height: 100%;" class="bgposition2" :src="xiazai6"></van-image>
                        </div>
                        <div style="flex:1; padding: 0 20px;">
                            <h3>每日邀请3个新用户</h3>
                            <p style="color: #ccc;margin: 5px 0;">每邀请1个，可得<span style="color: #d85a37;">次数+5</span></p>
                            <van-progress :percentage="0" stroke-width="8" pivot-text="0/3" pivot-color="#f9deb2"
                                color="linear-gradient(to right, #f7f7f7, #f9deb2)" />

                        </div>
                    </div>
                    <div>
                        <van-button size="small" color="#fae5bc" style="color: #333;">去邀请</van-button>
                    </div>

                </div>
            </div>


        </main>


    </div>
</template>
<style scoped lang="scss">
.container {
    padding: 0 5%;
    height: 100%;
}

.navtop {
    height: 50px;

    .van-nav-bar {
        --van-nav-bar-icon-color: #1b1b1b;
        // --van-nav-bar-background: rgbr(0, 0, 0, 0) !important;
        --van-nav-bar-background: rgbr(0, 0, 0, 0);
    }
}

main {}

.cardbox {
    position: absolute;
    left: 5%;
    right: 5%;
    top: 200px;
    // height: 500px;
    flex: 1;
    background-color: #fff;
    border-radius: 20px;
    padding: 20px;

    .card {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 40px;

        .card-left {
            flex: 1;
            display: flex;
            // justify-content: space-between;
            align-items: center;

            .icon {
                height: 50px;
                background-color: #f1f1f1a6;
                border-radius: 10px;
                margin-right: 10px;
            }
        }
    }

}
</style>